<template>
    <div>
        <!--    搜索表单-->
        <div>
            <div style="float: left;top:0px">
                <i style="font-size: x-large" class="el-icon-document-checked"></i><span
                    style="font-weight:bold;font-size:x-large">患者叫号</span>
            </div>
            <br>
            <el-divider></el-divider>
            <div>
                <el-input v-model="inputCaseNumber" style="width: 270px;float: left;" placeholder="请输入患者病历号"
                    clearable></el-input>
                <el-input v-model="inputRealName" style="width: 270px; margin-left: 20px;float: left;" placeholder="请输入患者姓名"
                    clearable></el-input>
                <el-button style="margin-left: 25px;float: left" type="primary" @click="SelectByCondition"> 搜索</el-button>
                <br>
            </div>
            <br> <br>
        </div>
        <el-divider></el-divider>
        <el-table :data="CallForm" style="width: 100%">
            <el-table-column label="挂号编号" prop="id">
            </el-table-column>
            <el-table-column label="患者姓名" prop="realName">
            </el-table-column>
            <el-table-column label="患者病历号" prop="caseNumber">
            </el-table-column>
            <el-table-column label="看诊状态" prop="visitState">
                <template slot-scope="scope">
                    <!-- 根据 visitState 的值进行选择性展示 -->
                    <span v-if="scope.row.visitState === 1">已挂号</span>
                    <span v-else-if="scope.row.visitState === 2">已叫号,正在等待问诊</span>
                    <span v-else-if="scope.row.visitState === 3">问诊结束</span>
                    <span v-else-if="scope.row.visitState === 4">已退号</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 跳转的时候记得把挂号id和病历id传过去！ -->
                    <!-- 点击创建病历时，就要再疾病表中进行插入了：插入挂号id -->
                    <!-- 创建病历 -->
                    <!-- <el-button type="primary" :plain="true">
                        <router-link class="a" :to="{ name: '病历首页', params: { registerId: scope.row.id } }">
                            {{ text }}创建病历
                        </router-link></el-button> -->
                    <el-button v-if="scope.row.visitState === 1 && !scope.row.hidden" type="primary" :plain="true"
                        @click="handleEdit(scope.$index, scope.row)">叫号</el-button>
                    <el-button type="primary" :plain="true" @click="createMedicalRecord(scope.row.id)">创建病历</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件开始-->
        <el-pagination style="text-align: right" @current-change="handleCurrentChange" :current-page="page"
            :total="totalCount" :page-size="limit" layout="prev, pager, next">
        </el-pagination>
        <!--分页组件结束-->
    </div>
</template>
<style >
a {
    text-decoration: none;
    color: dodgerblue;
}
</style>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            inputCaseNumber: '',
            inputRealName: '',
            CallForm: [],
            visitState: 1,//叫号
            visitType: '叫号',
            text: '',
            page: 1,//页码，默认为1，当页数变化时，进行了一个双向绑定
            limit: 10,//每页显示的条数，默认为10条
            totalCount: 50,//默认50条
            medicalRecordId: '',//病历id
        }
    },
    created() {
        //初始化叫号界面:展示所有已挂号的患者准备叫号
        this.load()
    },
    methods: {
        //每页条数发生变化时触发的事件
        //分页的页码发生变化时触发的事件
        async handleCurrentChange(pageNum) {
            this.page = pageNum
            //重新查询
            this.load()
        },
        //初始化叫号界面
        async load() {
            //展示所有已挂号患者信息
            //参数:String visitState
            await axios.get("http://127.0.0.1:8088/register/selectByVisitState", { params: { visitState: this.visitState, page: this.page, pageSize: this.limit } }).then((res) => {
                this.CallForm = res.data.data.rows
                this.totalCount = res.data.data.total
                console.log(res.data.data)
            })
        },
        // 多条件模糊搜索
        // 参数：String caseNumber,String realName,String visitState
        async SelectByCondition() {
            await axios.get("http://127.0.0.1:8088/register/selectForPatients", { params: { caseNumber: this.inputCaseNumber, realName: this.inputRealName, visitState: this.visitState } }).then((res) => {
                console.log(res.data.data)
                this.CallForm = []
                this.CallForm = res.data.data
                this.$message({
                    message: '查询成功',
                    type: 'success'
                });
            });
        },
        // //移除行
        // deleteRow(index, rows) {
        //     rows.splice(index, 1);
        // },
        //更新挂号表中对应患者的问诊状态
        async handleEdit(index, row) {
            //拿到进行病历号进行叫
            //参数:String caseNumber,String visitType
            await axios.get("http://127.0.0.1:8088/register/updateVisitState", { params: { caseNumber: row.caseNumber, visitType: this.visitType } }).then((res) => {
                console.log(res.data.data)
                this.$message({
                    message: '叫号成功',
                    type: 'success'
                });
            });
            //看看有移除行的功能了就不用再初始化了？
            //可以！
            // this.init();
        },
        //创建病历
        async createMedicalRecord(registerId) {
            //将挂号id插入病历表中
            await axios.get("http://127.0.0.1:8088/medicalRecord/insert", { params: { registerId: registerId } }).then((res) => {
                console.log("病历号id为：" + res.data.data)
                this.medicalRecordId = res.data.data
                this.$message({
                    message: '创建病历成功',
                    type: 'success'
                });

                //跳转到病历首页,并进行参数传递
                this.$router.push({
                    name: '病历首页',
                    params: {
                        registerId: registerId,
                        medicalRecordId: this.medicalRecordId
                    }
                });
            }).catch(error => {
                this.$message.error('创建病历失败');
            })
        }
    },
}
</script>